<template>

  <div class="promotion">
    <mt-header fixed title="赛期豆">
      <router-link to="/my" slot="left"><mt-button icon="back"></mt-button></router-link>
      <div slot="right" class="tab-text" @click="jump">明细</div>
    </mt-header>
    <div class="cont">
      <div class="text">赛期豆数量</div>
      <div class="num">0</div>
    </div>
    <div class="out">OUT</div>

    <div class="box">
      <div class="box-input">
        <mt-field  placeholder="请输入OUT赛期豆数量" v-model="number"></mt-field>
      </div>
      <div class="box-out">OUT</div>
    </div>
    <div class="tips">
      赛期豆 <span>OUT</span>采用人工审核，请联系在线客服!
    </div>
  </div>
</template>

<script>
  export default {

    name: 'promotion',
    data() {
      return {
        number: "",
      };
    },

    created: function() {},
    watch: {

    },
    mounted() {

    },
    methods: {
      onCopy() {
        const textArea = document.createElement("textarea");
        textArea.value = this.content;
        document.body.appendChild(textArea);
        textArea.focus();
        textArea.select();
        return new Promise((resolve, reject) => {
          document.execCommand("copy") ? resolve() : reject(new Error("出错了"));
          textArea.remove();
        }).then(
          () => {
            this.$layer.msg(this.$t("复制成功"));
          },
          () => {
            this.$layer.msg(this.$t("复制失败"));
          }
        );
      },
      jump() {
        this.$router.push({
          path: "douRecord"
        })
      }
    }

  };
</script>

<style scoped>
  .mint-header{
    background-color: #fff;
    color: #000;
    border-bottom: 1px solid #f5f5f5;
  }
  .tips{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: #14909a;
  }
  .tips span{
    font-size: 28px;
    color: #000;
    font-weight: 900;
  }
  .tab-text{
    font-size: 28px;
    color: #14909a;
  }
  /deep/ .mint-cell-wrapper{
    border: 1px solid #CCCCCC;
  }
  /deep/ .mint-cell-wrapper input{
    background-color: #fff;
  }
  .box-input{
    padding-bottom: 50px;
  }
  .cont {
    background: #14909A;
    width: 677px;
    height: 241px;
    margin: 120px auto 47px auto;
    border-radius: .25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .cont .text {
    font-size: 24px;
    color: #fff;
  }

  .cont .num {
    font-size: 24px;
    color: #fff;
    padding-top: 10px;
  }

  .out {
    background: #14909A;
    width: 677px;
    height: 83px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 36px;
  }

  .box {
    width: 617px;
    border: 1px solid #14909A;
    margin: 47px auto;
    padding:30px;
    border-radius: 20px;
  }

  .box-out {
    background: #14909A;
    width: 100%;
    height: 83px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 36px;
  }
</style>
